<script>
import { main } from '@/util/mixins'
import { mapState } from 'vuex'
import * as service from 'services/x-start/mgr/activity'
export default {
  mixins: [main],
  data() {
    return {
      service,
    }
  },
  created() {},
  computed: {
    ...mapState({
      typeList: state => state.sportList,
    }),
  },
  methods: {
    sortChange(val) {
      const { column, ...data } = val
      this.getList(data)
    },
    getMatch(id) {
      return (
        this.typeList.find(item => item.id == id) &&
        this.typeList.find(item => item.id == id).sportName
      )
    },
    formatTime(item) {
      return `${item.startTime.substring(0, 10)}</br>${item.endTime.substring(
        0,
        10
      )}`
    },
  },
}
</script>

<template lang="pug">
Template(@sizeChange="handleSizeChange" @currentChange="handleCurrentChange" :total="total" ref="child")
  span(slot="title") 赛事列表
  .search(slot="search")
    el-input.dy_inputWidth(placeholder="请输入搜索条件" clearable v-model="query.name")
    el-button(type="primary" class="el-icon-search" @click="seareHandeler(query)") 搜索
  .list(slot="list")
    el-table(ref="table"
      stripe
      fit
      :data="tableData"
      tooltip-effect="dark"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    )
      el-table-column(prop="time" sortable="time" label="日期")
        template(slot-scope="{row}")
          span(v-html="formatTime(row)")
      el-table-column(prop="name" label="赛事名称" )
      el-table-column(prop="type" label="活动类型")
        template(slot-scope="{row}")
          span {{getMatch(row.type)}}
      el-table-column(prop="totalCount" sortable="total" label="总人次")
      el-table-column(prop="saturation" sortable="baohe" label="饱和度")
      el-table-column(prop="collectPower" sortable="jiliu" label="集流力")
      el-table-column(prop="area"  label="场馆名称")
      //- el-table-column(prop="weather" label="天气")
      el-table-column(prop="status" label="状态")
      el-table-column(label="操作" fixed="right")
        template(slot-scope="{row}")
          Icon(title="查看" type="icon-delete" @click="$go(`/wms/activity/${row.id}`,{index:'/wms/activity'})")
</template>

<style lang="stylus" scoped>
.data
  display inline-block
  line-height 40px
  li
    display inline-block
    cursor pointer
    margin-right 20px
    &.active
      color #FF6D60
</style>